@import "../bootstrap/less/bootstrap.less";
@import "../font-awesome/less/font-awesome.less";
@import "_shared/_variables.less";
@import "_shared/_bootswatch.less";
@import "_shared/toastr.less";
@import "_shared/highlightjs.less";
@import "_shared/animations.less";
@import "_shared/spinkit.less";
@import "_shared/charts.less";
@import "_shared/exceptions.less";
@import "_shared/sql.less";

@font-family-sans-serif: sans-serif;
@font-family-serif: serif;

@line-height-base: 1.3;
@line-height-small: 1.0;
@form-group-margin-bottom: 10px;
@panel-heading-padding: 2px @padding-small-horizontal;
@navbar-height: 40px;
@navbar-margin-bottom: 10px;
@grid-gutter-width: 10px;
@nav-link-padding: 5px 10px;
@panel-body-padding: 5px;
@headings-small-color: @label-muted-color;
@modal-title-padding: 10px;
@modal-inner-padding: 10px;

/* Panel Layout Pages */
@inverse-bg: @gray-lighter;
@value-block-background-color: none;
@inverse-panel-bg: white;
@inverse-panel-heading-bg: white;
@padding-base-vertical: 18px;
@panel-default-border: #f5f5f5;
@table-border-color: #f5f5f5;

@miniprofiler-top-margin: 34px;

.navbar {
  font-size: 12px;
  min-height: 34px;
  > .container, > .container-fluid {
    .navbar-brand {
      padding: 0;
      width: 140px;
      height: 34px;
      background: url("/Content/img/logo/full-dark.svg") no-repeat;
      background-position: 2px 5px;
      background-size: 131px 24px;

      &:hover {
        background: @navbar-default-link-active-bg url("/Content/img/logo/full-dark.svg") no-repeat;
        background-position: 2px 5px;
        background-size: 131px 24px;
      }
    }
  }

  .navbar-nav {
    > li > a {
      padding-top: 8px;
      padding-bottom: 7px;

      .badge {
        vertical-align: baseline;
      }
    }
  }

  .navbar-form {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}
.nav-tabs {
    font-size: 12px;
    margin-bottom: 9.5px;

    li a .badge {
        line-height: 1;
        padding: 1px 7px;
        margin-left: 2px;
        vertical-align: unset;
    }
}
.navbar-toggle {
  padding: 6px 10px;
}

.nav-tabs-right {
  text-align: right;

  > li {
    display: inline-block;
    float: none;
  }
}

.navbar-list {
  min-width: 300px;
  > li {
    border-bottom: solid 1px @gray-darker;
    &:last-child {
      border-bottom: none;
    }
    > a {
      padding: 5px 10px;
    }
  }
}

.navbar-left {
  > a {
    display: block;
    line-height: 28px;
    border-bottom: solid 1px #eee;
    padding-left: 10px;
    font-size: 12px;
    &:hover {
      background-color: #3d85b0;
      color: #fff;
      text-decoration: none;
    }
    &.disabled {
      cursor: none;
      &:hover {
        background-color: #fff;
        color: @text-muted;
        text-decoration: none;
      }
    }
    &:first-child {
      border-top: solid 1px #eee;
    }
    &.active {
      background-color: #3d85b0;
      color: #fff;
      &:hover {
        text-decoration: none;
      }
    }
  }
}

input.loading {
    background: #ffffff url("data:image/svg+xml;utf8,<svg width='32px' height='20px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'><g transform='translate(25 50)'><circle cx='0' cy='0' r='7' fill='#2fa6c4' transform='scale(0.00340694 0.00340694)'><animateTransform attributeName='transform' type='scale' begin='-0.3333333333333333s' calcMode='spline' keySplines='0.3 0 0.7 1;0.3 0 0.7 1' values='0;1;0' keyTimes='0;0.5;1' dur='1s' repeatCount='indefinite'></animateTransform></circle></g><g transform='translate(50 50)'><circle cx='0' cy='0' r='7' fill='#2fa6c4' transform='scale(0.31409 0.31409)'><animateTransform attributeName='transform' type='scale' begin='-0.16666666666666666s' calcMode='spline' keySplines='0.3 0 0.7 1;0.3 0 0.7 1' values='0;1;0' keyTimes='0;0.5;1' dur='1s' repeatCount='indefinite'></animateTransform></circle></g><g transform='translate(75 50)'><circle cx='0' cy='0' r='7' fill='#2fa6c4' transform='scale(0.774545 0.774545)'><animateTransform attributeName='transform' type='scale' begin='0s' calcMode='spline' keySplines='0.3 0 0.7 1;0.3 0 0.7 1' values='0;1;0' keyTimes='0;0.5;1' dur='1s' repeatCount='indefinite'></animateTransform></circle></g></svg>") right no-repeat;
}

a:focus {
  text-decoration: none;
}

.text-wrap { white-space: normal; }
.text-wordbreak { word-break: break-word;}

h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 5px;
  margin-bottom: 5px;

  .small {
    font-weight: lighter;
  }
}

h4, h5, h6 {
  &.page-header {
    padding-bottom: 4px;
  }
}

.vertical-align {
    display: flex;
    align-items: center;
}

span.pull-right a.pull-right {
    float: none !important;
}

.page-header {
  margin: 10px 0 5px;

  span.pull-right.text-muted, span.pull-right .text-muted {
    color: @gray-lighter;

    &.small {
      margin-top: 6px;
    }
  }

  a.pull-right + a.pull-right:after {
    content: "\00a0|\00a0";
    color: @gray-lighter;
    display:inline-block;
  }

  .pull-right {
    font-size: 0.9em;
  }
}

.modal-header h4 .pull-right {
    padding: 4px 10px 0 0;
}

.page-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    padding-top: 10px;
    font-size: 12px;
    background: @gray-dark;
    color: @navbar-default-color;
    > .row {
      width: 100%;
    }
}

.pipe-delim {
    a + a:before {
        content: "| ";
    }
}

.actions, .page-header .pull-right {
  a + a:not(.btn):before,
  .btn-group + a:not(.btn):before {
    content: "| ";
    color: @gray;  
    opacity: 0.4;
    display: inline-block;
    padding-right: 3px;
  }
  .btn-xs {
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: 3px;
    min-width: 58px;
  }
  .sk-wave {
    display: inline-block;
    height: 8px;
  }
}

.btn-group {
  .btn~.dropdown-toggle {
  padding-left: 5px;
  padding-right: 5px;
  }
  .dropdown-menu {
    border-top-width: 1px;
    > li {
      &.active > a > .badge {
        color: @badge-active-color;
        background-color: @badge-active-bg;
      }
      > a {
        padding: 3px 10px;
        line-height: 18px;
        min-width: 190px;
        > .badge {
          float: right;
        }
      }
    }
  }
}

.text-center {
  .sk-wave {
    margin: 0 auto;
  }
}

.form-group-sm {
  select.form-control {
    padding: 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
.label-inline {
  line-height: 22px;
}

.radio.pull-left + .radio.pull-left {
    margin-left: 15px;
}

.modal-footer .btn {
  .btn-sm;
}

.table > tbody > tr.category-row h5 {
  .pull-right {
    font-size: 0.9em;
  }
  span.pull-right.text-muted, span.pull-right .text-muted {
    &.small {
      margin-top: 6px;
    }
  }
}
.tablesorter-header {
    cursor: pointer;
}

.table-dashboard {
  img {
    min-width: 50px;
    width: 100%;
    height: 20px;
    max-width: 300px;
  }
}
.modal-loader {
  min-height: 200px;
  position: relative;
  .loader {
    position: absolute;
    width: 100px;
    height: 80px;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -50px;
    &.sk-wave>div {
        width: 10px;
        margin-right: 5px;
    }
  }
}
.dashboard-chart {
  height: 400px;
}
.live-graphs {
    .dashboard-chart {
        height: 250px;
        display: inline-block;
    }
}

.reload-link {
  &:focus {
    text-decoration: none;
  }

  &:hover {
    text-decoration: none;

    i, i.fa {
      opacity: 1;
    }
  }

  i {
    transition: opacity 0.2s ease;
    opacity: 0.8;

    &.fa {
      font-size: 0.7em;
      transition: opacity 0.2s ease;
      opacity: 0.2;
    }
  }
}

.mp-results.mp-left {
  position: absolute;
  top: @miniprofiler-top-margin;
  border-bottom-right-radius: 10px;
  display: none; // Alt + P to show
}

.side-scroll {
  width: 100%;
  overflow: auto;
}

.table-middle {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        vertical-align: middle;
      }
    }
  }
}

.table-row-actions {
  tbody > tr {
    cursor: pointer;
  }
}

.row {
    &.inverse-panels {
        background-color: @inverse-bg;
        padding-top: @padding-base-vertical;

        .panel {
            border: none;
            .box-shadow(none);

            .panel-heading {
                background: @inverse-panel-heading-bg;
                font-weight: bold;
                font-size: 120%;
            }
            .panel-body {
                background: @inverse-panel-bg;
            }
        }
    }
}

.panel {
  margin-bottom: @padding-small-vertical;  
  .box-shadow(none);

  .panel-heading {
    padding: 4px 9px;
  }

  &.panel-default > .panel-heading {
    border: none;
  }
  
  .value-block {
    font-size: 14px;
    &.small {
      font-size: 12px;
      padding-top: 0;
      padding-bottom: 0;
      label {
        margin-top: 0;
        font-size: 11px;
      }
      .progress {
        height: 15px;
        span {
          line-height: 16px;
        }
      }
    }
    label {
      margin-top: 5px;
      margin-bottom: 0;
    }
    .small {
        font-size: 11px;
        color: @gray;
    }
  }
}
.panel-condensed {
  .panel-body {
    padding: 2px;
  }
  .value-block {
    margin: 2px 1px;
    padding: 0;
    label {
      margin-top: 5px;
      margin-bottom: 0;
      font-size: 0.9em;
    }
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.json-pretty {
  white-space: pre-wrap;
}

.modal-huge {
  width: ~"calc(100% - 60px)";
}

.value-block {
  text-align: center;
  color: @value-block-text-color;
  //background: @value-block-background-color;
  //border: solid 1px @value-block-border-color;
  margin: 2px 0;
  padding-top: 2px;
  padding-bottom: 2px;

  &.bg-primary {
    .bg-primary;
  }
  &.bg-success {
    .bg-success;
  }
  &.bg-info {
    .bg-info;
  }
  &.bg-warning {
    .bg-warning;
  }
  &.bg-danger {
    .bg-danger;
  }

  label {
    color: @label-muted-color;
    display: block;
    font-weight: normal;
  }

  .progress {
    margin-bottom: 2px;
  }

  .loop-value-block-grid(xs);

  @media (min-width: @screen-sm-min) {
    .loop-value-block-grid(sm);
  }

  @media (min-width: @screen-md-min) {
    .loop-value-block-grid(md);
  }

  @media (min-width: @screen-lg-min) {
    .loop-value-block-grid(lg);
  }
}

.loop-value-block-grid(@class, @index: 12) when (@index > 0) {
  &.col-@{class}-@{index} {
    width: percentage((@index / 12-0.01));
    margin-left: 0.5%;
    margin-right: 0.5%;
  }

  .loop-value-block-grid(@class, (@index - 1));
}

.value-block .progress, .progress-embed {
  height: 18px;
  font-size: 12px;
  font-weight: normal;
  position: relative;
  background-color: @value-block-progress-background-color;

  > span {
    position: absolute;
    left: 0;
    right: 0;
    color: white;
    text-align: center;
    line-height: 19px;
  }

  .smaller {
    font-weight: lighter;
  }
}

.pre-code { 
    font-size: 12px; 
    word-wrap: normal;
}

.pre-limited {
  max-width: 550px;
  max-height: 100px;
  overflow: auto;
  margin: 0 0 4.5px;
}
.progress-limited {
    max-width: 550px;
}

.error-stack {
  white-space: pre-wrap;
  max-height: 90px;
  overflow: hidden;
  & + .error-stack {
    margin-top: 20px;
  }
}

.text-muted, table .text-muted, .table .text-muted {
  color: @label-muted-color;
  font-weight: lighter;
}

.table-super-condensed {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      &.first-of-group {
        td {
          border-top: solid 1px @gray-light;
        }
      }

      > th {
        padding: 4px 3px;
      }

      > td {
        padding: 3px;
      }
    }
  }
}

.table, .table-striped {
  > tbody, > thead {
    &:first-child {
      tr.category-row th {
        padding-top: 0;
      }
    }

    tr.category-row th {
      border-top: none;
      background: @body-bg;
      padding-top: 11px;

      padding-bottom: 0;

      h4 {
        font-weight: normal;
      }
      h5 {
        margin-bottom: 4px;
      }
    }

    & + tbody {
      border: none;
    }

    .progress {
      height: 2px;
      padding: 0;
      border: none;
      margin-bottom: 0;
      &.progress-embed {
          height: 16px;
          line-height: 16px;
      }
      &.vertical {
        height: 20px;
        width: 6px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        .progress-bar {
          width: 100%;
          position: absolute;
          bottom: 0;
        }
      }
    }
  }
}

.table-actions {
  h5 {
    a.fa, a .fa {
      font-size: 12px;
    }
  }
  a {
    &.disabled {
      opacity: 0.2;
    }
    .fa, &.fa, &.icon-rotate-flip:hover .fa {
      opacity: 0.6;
      &.disabled {
        opacity: 0.2;
      }
    }

    &.fa {
      text-decoration: none;
    }

    &:hover .fa, &.fa:hover, .fa.solid {
      opacity: 1;
      &.disabled {
        opacity: 0.2;
      }
    }
  }
  &.actions-first {
    tbody > td:first-child {
      text-align: center;
    }
  }
}

.horizontal-load {
  margin: 20px auto;
  display: none;
  >div:only-child {
    margin: 0 auto;
  }
}

.no-content {
  color: @label-muted-color;
  text-align: center;
}

.panel-body.smaller {
  font-size: 0.9em;
}

.progress {
  height: 8px;
  padding: 0;
  border: none;
  margin-bottom: 5px;
}

.history-graph {
  height: 265px;
}

.no-select {
  .user-select(none);
}

.comma-list {
  display: inline;
  list-style: none;
  padding-left: 0;

  li {
    display: inline;

    &:after {
      content: ", ";
    }

    &:last-child:after {
      content: "";
    }
  }

  &.oxford li {
    &:nth-last-child(3) + li:after {
      content: ", and ";
    }

    &:nth-last-child(2):first-child:after {
      content: " and ";
    }
  }

  &.muted {
    li:after {
      color: @label-muted-color;
    }
  }
}

.list-group {
    .well-condensed {
        margin-bottom: 0;
    }

    &.list-group-condensed {
        margin-bottom: 0;
    }
}

.well-condensed {
    margin-bottom: @panel-body-padding;

    &:last-child {
        margin-bottom: 0;
    }
}

.small .checkbox {
    margin-top: 0px;
    margin-bottom: 0px;
}

.ul-tree, .ul-tree ul {
  list-style-type: none;
  padding-left: @padding-base-horizontal;
  &:last-child {
    margin-bottom: 0;
  }
}

.ul-plain {
  list-style-type: none;
  padding-left: 0;
  &:last-child {
    margin-bottom: 0;
  }
}

.list-group-sm {
    .list-group-item {
        padding: 5px 10px;

        &.bg-primary {
            border-left: solid 2px @brand-primary;
        }

        &.bg-success {
            border-left: solid 2px @brand-success;
        }

        &.bg-info {
            border-left: solid 2px @brand-info;
        }

        &.bg-warning {
            border-left: solid 2px @brand-warning;
        }

        &.bg-danger {
            border-left: solid 2px @brand-danger;
        }
    }
    margin-bottom: 0;
}

a.list-group-item, a.list-group-item span {
    cursor: pointer;
}

/* Cache Dashboard */
tr.cache-sub-item td:first-child {
    padding-left: 15px;
}
.table>tbody>tr.cache-item>th:nth-child(4),
.table>tbody>tr.cache-item>th:nth-child(5),
.table>tbody>tr.cache-item>th:nth-child(6) {
    font-weight: normal;
}

.ui-helper-hidden-accessible {
  display: none;
}

.total-row {
    font-weight: bold;
}

pre {
    padding: 0;
    font-size: 1em;
    code, code.hljs {
        border: none;
    }
}
